<template>
  <div class="u-header">
    <div class="u-header_top">
      <div class="u-text">
        <span>By the National Futures Association (NFA) supervision &nbsp;|&nbsp;
          <img src="./images/America.png" alt=""> &nbsp;&nbsp;|&nbsp;
          <img src="./images/China.png" alt="">
        </span>
        <div class="u-translate" v-on:click="showClick">
            <span>
              <!-- <img src="./images/zh.png" alt=""> -->
              <img :src="options[selected].img" alt="">

            </span>
            <img src="./images/triangle.png" height="5" width="10" alt="">
            <ul v-show="show" >
                <li @click="select(optionIndex)" v-for="(option, optionIndex) in options">
                  <img :src="option.img" width="72" height="18" alt="">
                </li>
            </ul>
        </div>
      </div>
    </div>
    <div class="u-nav">
      <div class="u-nav-con">
        <span class="logo">
          <img src="./images/LOGO.png" alt="">
        </span>
        <ul ref="prentUl">
          <li @mouseover="toggleShow()" @mouseout="toggleHide()"><router-link to="/" exact>首页</router-link></li>
          <li @mouseover="toggleShow(1)" @mouseout="toggleHide()"><a href="javascript:;">关于我们</a>
            <div class="list" :class='{active:IsActive==1}'>
              <router-link :to="{path:'about',query:{ind:1}}">公司简介</router-link>
              <router-link :to="{path:'about',query:{ind:2}}">合规监管</router-link>
              <router-link :to="{path:'about',query:{ind:3}}">我们的优势</router-link>
            </div>
          </li>
          <li @mouseover="toggleShow(2)" @mouseout="toggleHide()"><a href="javascript:;">我们的平台</a>
            <div class="list" :class='{active:IsActive==2}'>
              <router-link :to="{path:'ourplatfrom',query:{ind:1}}">桌面版MT4</router-link>
              <router-link :to="{path:'ourplatfrom',query:{ind:2}}">移动版MT4</router-link>
            </div>
          </li>
          <li @mouseover="toggleShow(3)" @mouseout="toggleHide()"><a href="javascript:;">入市须知</a>
            <div class="list":class='{active:IsActive==3}'>
              <router-link to="/account">开户须知</router-link>
              <router-link to="/withdraw">出入金流程</router-link>
            </div>
          </li>
          <li><router-link to="/activity">市场活动</router-link></li>
          <!--<li><a href="javascript:;">市场工具</a></li>-->
          <li @mouseover="toggleShow(4)" @mouseout="toggleHide()"><a href="javascript:;" ref="active_1">交易指南</a>
              <div class="list" :class='{active:IsActive==4}'>
                <router-link to="/fxknowledge">外汇基础知识</router-link>
                <router-link to="/fxadvantage">外汇交易优势</router-link>
                <a href="javascript:;"  @mouseover="toggleShow1(7)" @mouseout="toggleHide()">外汇交易指南
                  <div class="list_three" :class='{active:IsActive1==7}'>
                    <router-link to="/fxguide">外汇交易的风险控制</router-link>
                    <router-link to="/fxrun">外汇交易如何运作</router-link>
                  </div>
                </a>
                <a href="javascript:;" @mouseover="toggleShow1(6)" @mouseout="toggleHide()">外汇基本分析
                  <div class="list_three" :class='{active:IsActive1==6}'>
                    <router-link to="/fxbasic">基本分析</router-link>
                    <router-link to="/fxanalysis">技术分析</router-link>
                    <router-link to="/fxicontype">图表基本类型</router-link>
                  </div>
                </a>
                <router-link to="/fxwords">外汇词汇</router-link>
                <router-link to="/faq">常见问题</router-link>
              </div>
          </li>
          <li @mouseover="toggleShow(5)" @mouseout="toggleHide()"><a href="javascript:;">合作伙伴</a>
            <div class="list" :class='{active:IsActive==5}'>
              <router-link to="/partner">我们的合作优势</router-link>
              <router-link to="/ib">IB经纪商计划</router-link>
              <router-link to="/organization">机构合作方案</router-link>
            </div>
          </li>
        </ul>
        <!--<b style="margin-left: 71px;"><a href="http://trader.ukdfx.com" class="login">登录</a></b><b><a href="http://trader.ukdfx.com/register"  class="login">立即开户</a></b> -->
<b style="margin-left: 71px;"><a href="#"  class="login">登录</a></b>
        <b><a href="#"  class="login">立即开户</a></b>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        show: false,
        IsActive: -1,
        IsActive1: -1,
        options:[
          {
            'img': require('./images/zh.jpg' ),
          },
          {
            'img': require('./images/ft_zh.png' ),
          },
          {
            'img': require('./images/en.png' )
          },
          {
            'img': require('./images/korean.png' )
          },
          {
            'img': require('./images/french.png' )
          }
        ],
        selected: 0, // 代表選中的索引
      }
    },
    methods: {
      // 显示隐藏
      toggleShow:function(index){
        this.IsActive = index;
      },
      toggleHide:function(){
        this.IsActive = -1;
        this.IsActive1 = -1;
      },
      toggleShow1:function(index){
        this.IsActive1 = index;
      },
      showClick() {
        this.show = this.show
      },
      select(index,event) {
        this.selected = index
      },
      isActive: function(e) {
        this.rmclass()
        e.currentTarget.setAttribute('class','oactive')
      },
      rmclass: function() {
        var arr = document.getElementsByClassName('oactive');
        arr[0].setAttribute('class','')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .u-header
    width: 100%
    position: absolute
    z-index: 10
    .u-header_top
      width: 100%
      height: 30px
      background: rgba(41, 50, 66, 0.6)
      .u-text
        width: 1200px
        margin: 0 auto
        text-align: center
        position: relative
        span
          display: inline-block
          font-size: 13px
          color: #fff
          line-height: 30px
        .u-translate
          position: absolute
          width: 100px
          right: 18px
          top: 0px
          cursor: pointer
          ul
            background:url('./images/bg_rec.png')
            li
              padding: 5px;
              cursor: pointer
              &:hover
                background-color: rgba(0,0,0,.8)
              span
                display: inline-block
                width: 48px
                font-size: 12px
                color: #fff
                line-height: 30px
              img:nth-child(3)
                vertical-align: middle
            li:nth-child(1)
              display: block
    .u-nav
      width: 100%
      height: 70px
      background: rgba(40, 41, 48, 0.6)
      .u-nav-con
        display: flex
        width: 1200px
        height: 70px
        margin: 0 auto
        .logo
          display: inline-block
          margin-top: 20px
          margin-left: 24px
          img
            vertical-align: middle
        ul
          width: 813px;
          display: flex;
          margin-left: 47px;
          li
            flex:1
            height: 70px
            font-size: 17px
            color: #fff
            text-align: center
            position: relative
            a
              display:block
              line-height: 50px
              padding-top: 20px
              color: #fff
            a.active
              color: #ffcc00
            div.list
              background: rgba(40,41,48,0.6)
              width: 140px
              position: absolute
              top: 70px
              display:none
            .active
              display: block !important
              a
                width: 140px
                height: 40px
                padding-top: 0
                line-height: 40px
                font-size:16px
                color: #dddddd
                text-align: left
                padding-left: 15px
                position: relative
                .list_three
                  position: absolute
                  left: -188px
                  top: 0
                  width: 188px
                  background: rgba(40,41,48,0.6)
                  display:none
                  a
                    width: 188px
              a:hover
                background:#ffcc00
                color: #111111
        .login
          cursor:pointer
          width:87px
          display: inline-block
          line-height: 36px
          font-size: 16px
          text-align: center
      b:nth-child(3) a
        background: #ffcc00
        color: #333333
      b:nth-child(4) a
        height: 36px
        border: 1px solid #ffffff
        margin-left: 16px
        color: #fff
        box-sizing: border-box
      b
        margin-top: 17px
     a:focus, a:hover
      color: #fff
      text-decoration: none
</style>
